<template>
  <a-card :bordered="false">
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="16">
          <a-col :md="5" :sm="24">
            <a-form-item label="账号">
              <a-input v-model="queryParam.username" placeholder=""/>
            </a-form-item>
          </a-col>
          <a-col :md="5" :sm="24">
            <a-form-item label="姓名">
              <a-input v-model="queryParam.name" placeholder=""/>
            </a-form-item>
          </a-col>
          <a-col :md="5" :sm="24">
            <a-form-item label="手机号">
              <a-input v-model="queryParam.phone" placeholder=""/>
            </a-form-item>
          </a-col>
          <a-col :md="5" :sm="24">
            <a-form-item label="身份证号">
              <a-input v-model="queryParam.idCard" placeholder=""/>
            </a-form-item>
          </a-col>
          <a-col :md="4" :sm="24">
            <a-form-item label="状态">
              <a-select v-model="queryParam.status" placeholder="请选择">
                <a-select-option value="1">待审核</a-select-option>
                <a-select-option value="2">已审核</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <div class="table-operator">
      <a-row>
        <a-col :md="{span: 8}" :sm="24">
          <span class="table-page-search-submitButtons">
            <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
            <a-button style="margin-left: 8px" @click="() => queryParam = {}">重置</a-button>
          </span>
        </a-col>
        <a-col :md="{span: 2, offset: 14}" :sm="24">
          <a-button type="primary" icon="plus" @click="$refs.customerModal.add()">新建</a-button>
        </a-col>
      </a-row>
    </div>
    <s-table
      ref="table"
      size="small"
      rowKey="id"
      :columns="columns"
      :scroll="{ x: 1300 }"
      :data="loadData"
      showPagination="auto"
    >
      <span slot="uTime" slot-scope="text">
        <a-tag>{{ text | dateFilter }}</a-tag>
      </span>
      <span slot="status" slot-scope="text">
        <a-tag :color="text | statusClassFilter">{{ text | statusFilter }}</a-tag>
      </span>
      <span slot="action" slot-scope="text, record">
        <div class="editable-row-operations">
          <a @click="$refs.customerModal.edit(record)"><a-icon type="edit"/>修改</a>
          <a-divider type="vertical"/>
          <a-popconfirm
            title="是否确定删除"
            okText="是"
            cancelText="否"
            @confirm="deleteConfirm(record)"
          ><a><a-icon type="delete"/>删除</a></a-popconfirm>
          <a-divider type="vertical"/>
          <a @click="$refs.applyModal.edit(record)"><a-icon type="solution"/>申购信息</a>
        </div>
      </span>
    </s-table>
    <customer-modal ref="customerModal" @updateTable="refreshTable"/>
    <apply-modal ref="applyModal"/>
  </a-card>
</template>

<script>
  import { customerPage, deleteCustomer } from '@/api/customer'
  import { errorHandler, successHandler } from '@/utils/request'
  import { STable } from '@/components'
  import moment from 'moment/moment'
  import CustomerModal from './modules/CustomerModal'
  import ApplyModal from './modules/ApplyModal'

  export default {
    name: 'Customer',
    components: {
      STable, CustomerModal, ApplyModal
    },
    data () {
      return {
        // 高级搜索 展开/关闭
        advanced: false,
        // 查询参数
        queryParam: {},
        columns: [
          { title: '帐号', dataIndex: 'username', fixed: 'left' },
          { title: '密码', dataIndex: 'password' },
          { title: '姓名', dataIndex: 'name' },
          { title: '机构编码', dataIndex: 'email' },
          { title: '手机号', dataIndex: 'phone' },
          { title: '身份证号', dataIndex: 'idCard', width: '200px' },
          { title: '股东帐号', dataIndex: 'stockAccount' },
          { title: '更新时间', dataIndex: 'utime', scopedSlots: { customRender: 'uTime' } },
          { title: '状态', dataIndex: 'status', fixed: 'right', scopedSlots: { customRender: 'status' } },
          { title: '操作', dataIndex: 'action', fixed: 'right', scopedSlots: { customRender: 'action' }, width: '120px' }
        ],
        // 加载数据方法 必须为 Promise 对象
        loadData: parameter => {
          console.log('loadData.parameter', parameter)
          return customerPage(Object.assign(parameter, this.queryParam)).then(res => {
            console.log(res.result)
            const result = {}
            result.data = res.data.rows
            result.pageNo = parameter.pageNo
            result.pageSize = parameter.pageSize
            result.totalCount = res.data.total
            result.totalPage = Math.ceil(res.data.total / parameter.pageSize)
            return result
          }).catch(err => {
            console.log(err)
          })
        }
      }
    },
    filters: {
      dateFilter (timestamp) {
        const formatString = 'YYYY-MM-DD HH:mm:ss'
        return moment(timestamp).format(formatString)
      },
      statusFilter (status) {
        if (status && status === 2) {
          return '已审核'
        }
        return '待审核'
      },
      statusClassFilter (status) {
        if (status && status === 2) {
          return 'green'
        }
        return 'pink'
      }
    },
    methods: {
      refreshTable () {
        console.log('refresh table')
        this.$refs.table.refresh()
      },
      deleteConfirm (record) {
        console.log('record', record)
        deleteCustomer(record).then(res => {
          console.log(res)
          successHandler(res)
          this.refreshTable()
        }).catch(err => {
          errorHandler(err)
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  .table-operator {
    margin-bottom: 18px;

    button {
      margin-right: 8px;
    }
  }
</style>
